<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<style type="text/css">
			ul.mui-table-view {
				margin: 10px 0;
			}
			
			.mui-popover.mui-popover-action {
				background-color: #FFFFFF;
				text-align: center;
			}
			
			.mui-popover.mui-popover-action ul {
				padding: 0;
			}
			
			.mui-popover.mui-popover-action li {
				list-style: none;
				overflow: auto;
				width: 50%;
				float: left;
			}
			
			.mui-popover.mui-popover-action li img {
			}
			
			.mui-popover.mui-popover-action li span {
				font-size: 12px;
				display: block;
			}
			
			.mui-scroll {
				position: static;
				height: 300px;
			}
			
			#cardtype.mui-pull-right {
				margin-right: 25px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">添加账户</h1>
		</header>

		<div class="mui-content">
			<h5 class="min-title">请输入开户人本人的银行卡号</h5>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>真实姓名</label>
					<input id="cardname" type="text" readonly>
				</div>
				<div class="mui-input-row">
					<label>银行卡号</label>
					<input id="cardno" type="number" class="mui-input-clear" placeholder="请输入银行卡号">
				</div>
			</form>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="#actionArea">
						银行类型<span class="mui-pull-right" id="cardtype"></span>
					</a>
				</li>
			</ul>
			<div id="actionArea" class="mui-popover mui-popover-action">
				<div class="mui-scroll">
					<div class="mui-scroll-wrapper">
						<ul>
							<li><img src="../images/icon/bank/ABC.png" /><span>中国农业银行</span></li>
							<li><img src="../images/icon/bank/ICBC.png" /><span>中国工商银行</span></li>
							<li><img src="../images/icon/bank/CCB.png" /><span>中国建设银行</span></li>
							<li><img src="../images/icon/bank/PSBC.png" /><span>中国邮政储蓄银行</span></li>
							<li><img src="../images/icon/bank/BOC.png" /><span>中国银行</span></li>
							<li><img src="../images/icon/bank/CMB.png" /><span>招商银行</span></li>
							<li><img src="../images/icon/bank/COMM.png" /><span>交通银行</span></li>
							<li><img src="../images/icon/bank/SPDB.png" /><span>浦发银行</span></li>
						</ul>
					</div>
				</div>
			</div>
			<button class="mui-btn btn-main btn-block">确认添加</button>
		</div>

		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var cardName = document.getElementById("cardname");
			var cardNo = document.getElementById("cardno");
			var cardType = document.getElementById("cardtype");
			mui('.mui-scroll-wrapper').scroll({
				bounce: false // 禁止回弹
			});
			mui.plusReady(function() {
				Common.ajax({
					url: baseURL + 'authName/get.json'
				}, function(data) {
					console.log(JSON.stringify(data));
					if(data.code == 1) {
						cardName.value = data.realName;
					} else {
						mui.toast('获取实名信息失败，请稍后再试');
					}
				}, function(xhr) {
					mui.toast('网络异常，请稍后再试');
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
				
				// 选择银行
				mui('#actionArea').on('tap', 'li', function() {
					$(cardType).text($(this).find('span').text());
					mui('#actionArea').popover('hide');
				})
				
				mui('.mui-content').on('tap', '.btn-main', function() {
					var url = baseURL + 'account/bandCard/' + cardNo.value + '/' + cardName.value + '/' + cardType.innerText + '.json';
					console.log(url);
					Common.ajax({
						url : url
					}, function(data) {
						console.log(JSON.stringify(data));
						if(data.code == 1) {
							mui.toast('绑定成功');
							mui.fire(plus.webview.currentWebview().opener(), 'reload');
							mui.back();
						} else {
							mui.toast('绑定失败，' + data.msg);
						}
					}, function(xhr) {
						mui.toast('网络异常，请稍后再试');
						console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
					})
				})
			})
		</script>
	</body>

</html>